<template>
	<!-- 吸顶灯 -->
	<div class="ElAffix">
		<div :class="affixcontainer">
			<el-affix
				@change="change"
				ref="affix"
				@scroll="scroll"
				:target="affixcontainer ? `.${affixcontainer}` : ''"
				:z-index="zIndex"
				:offset="props.offset"
			>
				<slot></slot>
			</el-affix>
		</div>
	</div>
</template>
<script setup name="ceilingLamp" lang="ts">
import { onBeforeMount, onUnmounted, defineProps, ref, defineExpose, defineEmits } from 'vue'
const emit = defineEmits(['change', 'scroll'])
const props = defineProps({
	// 偏移距离
	offset: {
		type: Number,
		default: 100
	},
	// 偏移距离
	zIndex: {
		type: Number,
		default: 100
	},
	// 指定容器 (CSS 选择器)
	affixcontainer: {
		type: String,
		default: ''
	}
})
//fixed 状态改变时触发的事件
const change = (e: boolean) => {
	emit('change', e)
}
//滚动监听
const scroll = (e: any) => {
	emit('scroll', e)
}
const affix: any = ref(null)
// 手动更新固钉状态
const updateAffix = () => {
	affix.value.update()
}
// 手动更新固钉状态
const updateRootAffix = () => {
	console.log(affix.value.updateRoot)
	affix.value.updateRoot()
}
defineExpose({
	updateAffix,
	updateRootAffix
})
//设置吸顶灯运行环境
let elMain: any = ''
let html: any = ''
function styleFn(dom: any, style: string) {
	for (let i = 0; i < dom.length; i++) {
		dom[i].style.overflow = style
	}
}
// 进入页面HTML滚动
onBeforeMount(() => {
	elMain = document.getElementsByClassName('el-main')
	console.log(elMain)
	html = document.getElementsByTagName('html')[0]
	html.style.height = 'auto'
	styleFn(elMain, 'visible')
})
// 离开页面main滚动
onUnmounted(() => {
	html.style.height = '100%'
	styleFn(elMain, 'auto')
})
</script>
<style lang="scss" scoped></style>
